<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 font-awesome -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div class="container">
    <div class="form row">
        <form class="form-horizontal col-md-offset-3" id="login_form" action="<%= request.getContextPath()%>/user/login" method="get">
            <h3 class="form-title">登录</h3>
            <div class="col-md-9">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">
                    <i class="fa fa-lock fa-lg"></i>
                    <input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="20"/>
                </div>
                <div class="form-group col-md-offset-9">
                    <button style="margin: 50px auto" type="submit" class="btn btn-success pull-right" name="submit">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function () {
        <c:if test="${(sessionScope.loginError!=null)}">
        alert("用户名或密码错误!")
        </c:if>
    })
</script>
<style>
    h3{
        text-align: center;
    }
    .form-title {
        text-align: center;
    }
    .form {
        background: linear-gradient(to bottom, #00bfff, #1e90ff);
        width: 400px;
        margin: 120px auto;
        padding: 50px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    /*阴影*/
    .fa {
        display: inline-block;
        top: 27px;
        left: 6px;
        position: relative;
        color: #b8b8b8;
    }
    input[type="text"], input[type="password"] {
        padding-left: 26px;
    }
    .checkbox {
        padding-left: 21px;
    }
</style>
</html>


